<template>
    <div class="customer-el-form">
        <el-form
            ref="formRef"
            v-for="(person, personIndex) in formData"
            :key="personIndex"
            :model="person"
            :rules="rules"
            :validate-on-rule-change="false"
			@validate="(prop: FormItemProp, isValid: boolean, message: string) => triggerValidate(prop, isValid, message, personIndex)"
        >
			<div>--------item {{personIndex}}--------</div>
            <el-form-item label="用户名" :prop="`name`" :rules="rules.name">
                <el-input v-model="person.name" />
            </el-form-item>
            <el-form-item label="年龄" :prop="`age`" :rules="rules.age">
                <el-input v-model="person.age" />
            </el-form-item>
        </el-form>
        <button @click="addPerson">增加</button>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useValidForm } from './hooks/useValidForm';
import { FormItemProp } from 'element-plus';

const { formRef, triggerValidate, i18n } = useValidForm();
const formData = ref([
    {
        name: '',
        age: null
    }
])

const rules = computed(() => {
    return {
        name: {
            required: true,
            trigger: ['blur', 'change'],
            message: i18n.t('user.nameEmpty')
        },
        age: {
            required: true,
            trigger: ['blur', 'change'],
            message: i18n.t('user.ageEmpty')
        }
    }
})

const addPerson = () => {
    formData.value.push({
        name: '',
        age: null
    })
}
</script>

<style lang="less" scoped>
.customer-el-form {
    width: 20rem;
}
</style>
